<template>
  <div>
    <div class="statubar"></div>
    <list @loadmore="fetch" loadmoreoffset="1" ref="list" :showRefresh="true" @refresh="onrefresh">
      <cell>
        <div style="justify-content:center">
            <slider class="slider size" auto-play="true">
              <div v-for="src in posters">
                <image class="size" resize="cover" :src="src"></image>
              </div>
              <indicator class="indicator"></indicator>
            </slider>
        </div>
      </cell>
      <cell>
        <div v-for="(v, i) in menus" class="row">
          <div v-for="(bean, k) in v" class="item">
            <image style="width:88px;height:88px" :src="bean.icon"></image>
            <text>{{bean.title}}</text>
          </div>
        </div>
      </cell>
      <cell v-for="(bean, i) in lists" :key="i" @click="wxcCellClicked(i)">
        <MainCell class="maincell" v-bind:bean="bean"></MainCell>
      </cell>
    </list>
  </div>
</template>
<script>
  import MainCell from '../component/maincell';
  var modal = weex.requireModule("bmModal");
  var globalEvent = weex.requireModule('globalEvent');
  module.exports = {
    data: function () {
      return {
        page:1,
        menus:[
          [{icon:'https://cdn.ph100.cn/uploads/image/app_06.png',title:'餐饮美食'},
           {icon:'https://cdn.ph100.cn/uploads/image/app_07.png',title:'住宿娱乐'},
           {icon:'https://cdn.ph100.cn/uploads/image/app_01.png',title:'水果蔬菜'},
           {icon:'https://cdn.ph100.cn/uploads/image/app_02.png',title:'汽车服务'},
           {icon:'https://cdn.ph100.cn/uploads/image/app_09.png',title:'超市百货'}],
          [{icon:'https://cdn.ph100.cn/uploads/image/app_03.png',title:'服装鞋帽'},
            {icon:'https://cdn.ph100.cn/uploads/image/app_08.png',title:'美容美发'},
           {icon:'https://cdn.ph100.cn/uploads/image/app_05.png',title:'生活服务'},
           {icon:'https://cdn.ph100.cn/uploads/image/app_04.png',title:'婚纱摄影'},
           {icon:'https://888.ph100.cn/h5_kym/html5/images/app_10.png',title:'全民约抢'}]
        ],
        posters:[
          'https://gw.alicdn.com/tfs/TB1TKvQk79WBuNjSspeXXaz5VXa-900-1312.jpg',
          'https://gw.alicdn.com/tfs/TB1nDsrkYSYBuNjSspfXXcZCpXa-1080-1575.jpg',
          'https://gw.alicdn.com/tfs/TB1MqHJkVuWBuNjSszbXXcS7FXa-1080-1574.jpg',
          'https://gw.alicdn.com/tfs/TB1u1gjkY1YBuNjSszhXXcUsFXa-1080-1518.jpg'
        ],
        lists: []
      }
    },
    components: { MainCell },
    methods: {
      wxcCellClicked (i) {
        this.$router.open({
            name: 'home.detail',
            type: 'PUSH',
            params: {
              shopid:this.lists[i].id
            }
        })
      },
      fetch (event) {
        modal.toast({ message: 'loadmore', duration: 1 });
        this.page += 1;
        this.loadData();
      },
      onrefresh() {
        modal.toast({ message: 'refresh', duration: 1 });
        this.page = 1;
        this.loadData();
      },
      loadData() {
        this.$notice.loading.show("请等待");
        this.$fetch({
          method: 'GET',
          url: 'https://888.ph100.cn/getShops',
          data: {
            page:this.page,
            pagesize:10
          }
        }).then(resData => {
          // 成功回调
          console.log(resData);
          this.$notice.loading.hide();
          this.$refs["list"].refreshEnd();

          if (this.page == 1) {
            this.lists = [];
          }
          if (resData["shops"] != ""){
            this.lists = this.lists.concat(resData["shops"]);
          }
        }, error => {
          // 错误回调
          console.log(error);
          this.$notice.loading.hide();
          this.$refs["list"].refreshEnd();
        })
      },
    },
    created: function() {
      this.loadData();
    },
  }
</script>
<style scoped>
  .item{
    flex:1;
    justify-content: center;
    align-items:center;
  }
  .row{
    background-color: #ffffff;
    flex-direction: row;
    height:160px;
  }
  .size {
    width: 750px;
    height: 320px;
  }
  .slider {
    position: relative;
  }
  .indicator {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.3);

    itemColor: #DDDDDD;
    itemSelectedColor: rgb(0, 180, 255);
  }

  .panel {
    width: 600px;
    height: 250px;
    margin-left: 75px;
    margin-top: 35px;
    margin-bottom: 35px;
    flex-direction: column;
    justify-content: center;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(162, 217, 192);
    background-color: rgba(162, 217, 192, 0.2);
    flex-direction: row;
  }
  .text {
    font-size: 100px;
    text-align: center;
    color: #41B883;
  }
  .maincell{
    height: 250;
    width: 750;
  }
  .statubar{
    width: 750px;
    height: 44px;
  }
</style>
